<!-- https://www.jianshu.com/p/d9373a86b748 -->
<template>
	<view class="bgView">
		<view class="inputBg">
			<view class="inputView">
				<image src="../../static/img/phone.png" mode=""></image>
				<input class="uni-input" type="text" name="username" :value="username" placeholder="账号" @input="usernameChange" />
			</view>

			<view class="inputView">
				<image src="../../static/img/password.png" mode=""></image>
				<input class="uni-input" password type="text" name="password" :value="password" placeholder="密码" @input="passwordChange" />
			</view>
			<!-- //class="uni-flex uni-row" style="justify-content: flex-end;" -->
			<checkbox-group @change="remindPassAction">
				<checkbox :checked="remindPas" :value="checkboxValue" class="text" @change="remindPassAction">记住密码</checkbox>
			</checkbox-group>

		</view>
		<button class="login" type="primary" @tap="login">立即登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				checkboxValue: 1,
				// isChecked: 1,
				remindPas: true,
			};
		},
		onLoad() {
			console.log('login onLoad');
			var self = this;
			uni.getStorage({
				key: 'userAccount',
				success(res) {
					self.username = res.data.name;
					self.password = res.data.pass;
					if (self.password.length == 0) {
						// self.isChecked = 0;
						self.remindPas = false;
					} else {
						// self.isChecked = 1;
						self.remindPas = true;
					}

					// console.log('存储的用户名密码' + self.username + self.password);
				},
				fail(res) {

				}
			})
		},
		onShow() {


		},
		methods: {
			// 			remindPass: function(e) {
			// 				this.isChecked = e.detail.value;
			// 			},
			usernameChange: function(e) {
				this.username = e.target.value
			},
			passwordChange: function(e) {
				this.password = e.target.value
			},
			remindPassAction: function(e) {

				if (e.detail.value == 1) {

					this.remindPas = true;
				} else {

					this.remindPas = false;
				}
			},
			login() {
				var self = this;
				var username = this.username,
					password = this.password;
				if (username.length > 0 && password.length > 0) {
					this.$http.get('xagrid/login', {
						username: username, //wgy1
						password: password //000000
					}).then((res) => {
						if (res.errcode === '0') { //0成功  1失败
							if (res.data.errcode && res.data.errcode == 1004) {

								uni.showToast({
									icon: 'none',
									title: res.data.errmsg,
									duration: 2000
								})
								return;
							}
							var savePas = self.remindPas === true ? password : '';

							var tempData = {
								name: username,
								pass: savePas
							};
							uni.setStorage({
								key: "userAccount",
								data: tempData,
								success() {}
							});


							uni.setStorage({
								key: "accessToken",
								data: res.data.accressToken,
								success: function() {
									uni.reLaunch({
										url: "../main/main"
									})
								}
							});

						} else {
							uni.showToast({
								icon: 'none',
								title: res.errmsg,
								mask: false,
								duration: 2000
							});
						}
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '输入不正确',
						mask: false,
						duration: 2000
					});
				}
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-image: url("");
		background-size: cover;
		background-position: center;
		position: relative;
	}



	.bgView {
		width: 100%;
		height: 100%;
	}

	.inputBg {
		width: 100%;
		margin-top: 300upx;
		display: flex;
		flex-direction: column;
	}

	.inputView {
		margin-top: 30upx;
		margin-bottom: 12upx;
		margin-left: 30upx;
		margin-right: 30upx;
		height: 85upx;
		border-radius: 40upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		background-color: #FFFFFF;
	}

	.inputView image {
		margin-left: 20upx;
		width: 50upx;
		height: 50upx;
	}

	.inputView input {
		margin-left: 20upx;
		margin-right: 35upx;
	}

	.text {
		display: flex;
		justify-content: flex-end;
		margin-right: 56upx;
		line-height: 70upx;
		text-align: center;
		color: #000;
		font-size: 26upx;
	}

	.login {
		margin-top: 72upx;
		margin-left: 30upx;
		margin-right: 30upx;
		text-align: center;
		border-radius: 48upx;
		height: 96upx;
		line-height: 96upx;
	}
</style>
